import type { VNode } from 'vue';

import { $t } from '@vben/locales';

import { Tag } from 'ant-design-vue';

interface TagType {
  [key: string]: { color: string; label: string };
}

export const tagTypes: TagType = {
  danger: { color: 'error', label: $t('ui.color.error') },
  default: { color: 'default', label: $t('ui.color.default') },
  primary: { color: 'processing', label: $t('ui.color.primary') },
  success: { color: 'success', label: $t('ui.color.success') },
  warning: { color: 'warning', label: $t('ui.color.warning') },
  cyan: { color: 'cyan', label: 'cyan' },
  pink: { color: 'pink', label: 'pink' },
  purple: { color: 'purple', label: 'purple' },
  red: { color: 'red', label: 'red' },
};

// 字典选择使用 { label: string; value: string }[]
interface Options {
  label: string | VNode;
  value: string;
}

export function tagSelectOptions() {
  const selectArray: Options[] = [];
  Object.keys(tagTypes).forEach((key) => {
    if (!tagTypes[key]) return;
    const label = tagTypes[key].label;
    const color = tagTypes[key].color;
    selectArray.push({
      label: <Tag color={color}>{label}</Tag>,
      value: key,
    });
  });
  return selectArray;
}
